<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>bs5-网格系统,table，对话框</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/bs03.css">
</head>

<body>
  <!-- 网格系统，12格 -->
  <div class="container-fluid">
    <div class="row">
      <div class="col">自适应的网格</div>
      <div class="col">其实是压力布局</div>
      <div class="col">flex都是1的效果</div>
    </div>
  </div>

  <hr>

  <!-- 
    自带媒体查询的自适应网格
    	xs<576px	sm≥576px	md≥768px	lg≥992px	
      xl≥1200px	xxl≥1400px
  -->
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6 col-lg-4 col-xl-3 col-xxl-2">第1个</div>
      <div class="col-md-6 col-lg-4 col-xl-3 col-xxl-2">第2个</div>
      <div class="col-md-6 col-lg-4 col-xl-3 col-xxl-2">第3个</div>
      <div class="col-md-6 col-lg-4 col-xl-3 col-xxl-2">第4个</div>
      <div class="col-md-6 col-lg-4 col-xl-3 col-xxl-2">第5个</div>
    </div>

  </div>

  <div>
    <!-- d-屏幕大小-显示模式 -->
    <div class="d-sm-block d-md-none">小屏幕版本</div>
    <div class="d-sm-none d-md-block">大屏幕版本</div>
  </div>

  <!-- 表格 -->
  <table class="table table-hover table-bordered table-striped">
    <thead class="table-primary">
      <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>地址</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>1000</td>
        <td>石桂权</td>
        <td>湖南长沙</td>
      </tr>
      <tr>
        <td>1001</td>
        <td>苏铭子</td>
        <td>湖南常德</td>
      </tr>
    </tbody>

  </table>

  <!-- 弹出对话框 data-bs-backdrop="static"表示点击遮罩层不可以关闭-->
  <div class="modal fade" data-bs-backdrop="static" id="divDialog">
    <div class="modal-dialog">
      <div class="modal-content">

        <div class="modal-header">
          <div class="modal-title">一个对话框</div>
          <span data-bs-toggle="modal" data-bs-target="#divDialog" class="btn-close"></span>
        </div>

        <div class="modal-body">
          <!-- m方向-大小 是margin外边距 -->
          <div class="input-group mt-2">
            <span class="input-group-text">*</span>
            <input type="text" class="form-control">
            <input type="text" class="form-control">
            <!-- bg-背景色 text-文字颜色 -->
            <span class="input-group-text bg-primary text-white">@</span>
          </div>

          <!-- p方向-大小是padding内边距 -->
          <div class="mt-2">
            <input type="text" class="form-control">
          </div>

        </div>

        <div class="modal-footer">
          <span data-bs-toggle="modal" data-bs-target="#divDialog" class="btn btn-danger">关闭</span>
        </div>

      </div>
    </div>
  </div>

  <!-- 
    data-bs-toggle="modal" 表示触发弹出框动作
    data-bs-target="#divDialog" 表示指定触发弹出框的id
  -->
  <span data-bs-toggle="modal" data-bs-target="#divDialog" class="btn btn-primary">弹出对话框</span>



  <script src="js/bootstrap.bundle.min.js"></script>
  <script src="js/bs03.js"></script>


</body>

</html>